<script setup>
import { ref, reactive, computed, onMounted, nextTick } from "vue";
import request from "@/common/utils/request";
import {
  CloseOutlined,
  SendOutlined,
  DeleteOutlined,
  ExclamationCircleOutlined,
  SaveOutlined,
  EditOutlined,
  RedoOutlined,
} from "@ant-design/icons-vue";
import { nanoid } from "nanoid";
import { message } from "ant-design-vue";
import { Empty } from "ant-design-vue";

// 保存到文案库弹窗
import BatchCollect from "@/views/shotstack/AiCreation/components/batchCollect.vue";
const BatchCollectRef = ref(null);

// 素材库
import ChooseMaterial from "@/views/shotstack/EditingCenter/modules/bottomSet/components/chooseMaterial.vue";

// 导入关键词组件
import ImportKeyWords from "@/views/shotstack/MixedCutPlatforms/mixedCutCreat/components/Component/keyWordsImport.vue";
const importKeyWords = ref(null);

import utils from "@/common/utils/utils.js";

import vipModal from '@/socialMedia/Vip/vipModal.vue'
const vipModalRef = ref(null)
const vipVisible = ref(false)

// 空状态图片
const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
const emit = defineEmits(["selectScript:data"]);
// 保存至文案库需要的数据
const chooseTextArticle = ref([]);
const props = defineProps({
  // 脚本数量, 最多五个
  scriptArrLength: {
    type: Number,
    default: 0,
  },

  // 当前使用的脚本数组
  useScript: {
    type: Array,
    default: () => [],
  },
});

const state = reactive({
  visible: false,
  submitLoading: false,
  // 动态表单
  industryList: [],
  // 文案风格列表
  options: [],
  // 语言
  languagesList:[],
  // 脚本列表
  scriptList: [
    // {
    //     "title": "补水神器，肌肤变弹嫩！  ",
    //     "subtitle": "水润细腻，瞬间焕活",
    //     "subtitle_text_block": "补水神器，让肌肤感受前所未有的弹嫩！使用后，你的脸庞将焕发出健康光泽，告别干燥与暗沉，持续透润每一天，如何能错过这样惊艳的体验？快来感受吧！",
    //     "id": "bWn8W04Bk65sSZu6F9j69",
    //     "edit": false,
    //     "checked": false,
    //     "loading": false,
    //     "content": "补水神器，让肌肤感受前所未有的弹嫩！使用后，你的脸庞将焕发出健康光泽，告别干燥与暗沉，持续透润每一天，如何能错过这样惊艳的体验？快来感受吧！",
    //     "show": true,
    //     "msg": "",
    //     "disabled": false
    // }
  ],

  // 生成中
  creatLoading: false,
  // 素材库弹窗开关
  materiallibraryShow: false,
});

// 表单实例
const formRef = ref(null);

const showList = computed({
  get() {
    state.scriptList.forEach((ele) => {
      checkValidate(ele);
    });
    return state.scriptList;
  },
});

// 选择的项
const selectList = computed(() => {
  // 被勾选且没有被禁用
  return state.scriptList.filter((item) => item.checked);
});

// 实际能导入到脚本的项
// const realSelectList = computed(() => {
//     if (!selectList.value.length) return []
//     return selectList.value.filter(item => checkValidate)
// })

// 确定按钮禁用逻辑
const submitDisabled = computed(() => {
  if (props.scriptArrLength >= 5) return true;
  const filterList = selectList.value.filter((item) =>
    props.useScript.some((ele) => ele.id == item.id)
  );
  // 减去已勾选使用的脚本
  if (selectList.value.length - filterList.length <= 0) return true;
  return false;
});

let formState = reactive({
  // sellingpoints: '', // 卖点
  // shooting_script_num: 1, // 镜头组数量
  type: 1, // 选择的生成模式 - 0分镜头 1全局文本
  script_type: "", // 文案风格
  num: 2, // 生成条数
  titleList: [], // 选择的标题
  industry: "", // 选择的行业类型
  limit_type: "", // 生成字数
    // 生成字数选择
  limit_typeList: [],
  // 语言
  language:''
});

const error_msg = ref("");


// 下一步提交数据, 生成视频组数据
const submit = async (submitType = "creat") => {
  console.log(formState.titleList, "选择的标题");

  // return
  try {
    const values = await formRef.value.validate();

    try {
      // 查看用户的点数是否足够消耗
      await utils.aiTextGet()
      try {
        // 消耗规则
        const rule = await utils.consumptionPointRule()
        // 获取提示
        const content = utils.ruleTips({ res: rule, key: "ai_text_point" })
        // 弹出提示
        await utils.md({ content })
        // 弹窗确认消耗
      } catch (error) {
        return
      }
    } catch (error) {
      // 打开充值, 接着打开点数购买
      vipVisible.value = true
      vipModalRef.value && vipModalRef.value.openBuyVisible()
      return
    }

    console.log(values, "提交数据");
    // 动态表单数据
    const content = dynamic_form.value
      .map((i) => {
        return `${i.label}:${formState[i.label]}`;
      })
      .join("\n");
    // 选择的标题
    let title_data = [];

    console.log(title_data, "选择的标题-提交数据");
    const params = {
      // shooting_script_num: formState.shooting_script_num,// 镜头组数量
      industry: formState.industry, // 选择的行业类型
      language: formState.language,
      type: formState.type,
      num: formState.num, // 生成生成标题数
      content, // 动态表单
      script_type: formState.script_type[1], // 文案风格
      is_polling: 1, // 轮询
      refresh: 0, // 是否刷新
      limit_type: formState.limit_type,
      title_data,
    };

    state.creatLoading = true;
    try {
      const getResult = async () => {
        const res = await request.post(
          "/work_ai",
          "/user/shotstack/scripttext/ai/subtitlesScene",
          params
        );


        if (
          res.result.code != 0 &&
          res.result.msg != "成功" &&
          res.result.msg &&
          res.result.msg !== ""
        ) {
          error_msg.value = res.result.msg;
          message.warning(res.result.msg);
        }
        
        if (res.result?.status == "doing") {
          setTimeout(() => {
            !params?.task_id && (params.task_id = res.result.task_id);
            getResult();
          }, 3000);
        } else {
          console.log(res.result, "生成视频组数据");
          if (
            res.result.code != 0 &&
            res.result.msg != "成功" &&
            Array.isArray(res.result?.chat_data) &&
            !res.result?.chat_data.length
          ) {
            throw new Error(res.result.msg);
          }
          console.log(res.result, "请求回来的脚本信息");
          // 存储数据
          if (submitType == "creat") {
            state.scriptList = res.result?.chat_data || [];
          } else if (submitType == "more") {
            state.scriptList = [...state.scriptList, ...res.result?.chat_data];
          }
          if (state.scriptList.length) {
            state.scriptList.forEach((item) => {
              // 如果是数组, 则代表没有初始化过数据
              if (Array.isArray(item.subtitle_text_block)) {
                // 是否编辑状态, 和是否选择状态
                item.edit = false;
                item.checked = false;
                item.loading = false;
                // 将数组转为字符
                item.subtitle_text_block = item.subtitle_text_block
                  .map((ele) => ele)
                  .join("。");
                item.content = item.subtitle_text_block;
              }
            });
          }
          state.creatLoading = false;
        }
      };
      await getResult();
    } catch (error) {
      state.creatLoading = false;
      message.error(error.message);
    }
  } catch (error) {
    console.log(error, "失败");
    message.error("请完善生成信息!");
  }
};

// 生成更多
const creatMore = () => {
  submit("more");
};

onMounted(() => {
  getIndustry();
});

// 获取字数选择列表
const getLimit_typeList = async () => {
  const res = await request.get("/work_ai", "/user/shotstack/ai/wordLimit");
  console.log(res, "ai文案字数");
  state.limit_typeList = res.result;
  // word_limit_50_75
  const find = res.result.find((ele) => ele.value == "word_limit_75_150");
  formState.limit_type = !!find ? find.value : res.result[0].value;
};

// 获取行业类型接口
const getIndustry = () => {
  request.get("/work_ai", "/user/shotstack/ai/industry").then((res) => {
    console.log(res, "行业信息i");
    state.industryList = res.result.industryList;
    // 行业初始赋值
    const find = res.result.industryList.find((ele) => ele.name == "通用");
    formState.industry = find?.id || res.result.industryList[0].id;
  });
};

// 动态表单生成
const dynamic_form = computed(() => {
  const find = state.industryList.find((item) => item.id == formState.industry);
  if (find) {
    find.params.forEach((i) => {
      if (!formState[i.label] && formState[i.label] != "") {
        formState[i.label] = "";
      }
    });
    return find.params;
  } else {
    return [];
  }
});

// 进入编辑模式, 克隆旧项回显的数据
const CloneOldData = ref({});

// 编辑某项脚本
const editScript = (ele) => {
  if (CloneOldData.value?.content) {
    let find = state.scriptList.find((item) => item.edit);
    if (find) {
      Object.assign(find, JSON.parse(JSON.stringify(CloneOldData.value)));
      find.edit = false;
    }
  }
  CloneOldData.value = JSON.parse(JSON.stringify(ele));
  ele.edit = true;
};

// 保存编辑
const saveScript = (ele) => {
  ele.edit = false;
};

// 取消编辑
const cancelEdit = (ele) => {
  CloneOldData.value.edit = false;
  for (let key in CloneOldData.value) {
    ele[key] = JSON.parse(JSON.stringify(CloneOldData.value[key]));
  }
  CloneOldData.value = new Object();
};

// 修改当前高亮的头部标题
const changeActive = (id) => {
  formState.industry = id;
};

// 清空输入项
const clearForm = () => {
  const find = state.industryList.find((ele) => ele.id == formState.industry);
  if (find) {
    find.params.forEach((i) => {
      formState[i.label] = "";
    });
  }
};

// 导入到脚本, 并且保存
const submitConfirm = async () => {
  if (props.scriptArrLength < 5) {
    state.submitLoading = true;
    // 如果有编辑的项
    const find = state.scriptList.find((i) => i.edit);
    if (!!find) {
      Object.assign(find, JSON.parse(JSON.stringify(CloneOldData.value)));
      find.edit = false;
      CloneOldData.value = new Object();
    }
    for (let ele of selectList.value) {
      const params = {
        title: ele.title,
        content: ele.content,
        id: ele?.submit_id || 0,
      };
      try {
        const res = await request.put(
          "/work_ai",
          "/user/shotstack/scripttext/save",
          params
        );
        if (res?.code && res.code != 1000)
          throw new Error(res.msg || "保存失败");
        console.log(res, "结果");
        ele.submit_id = res.result?.id;
      } catch (error) {
        message.warning(error.message);
      } finally {
        state.submitLoading = false;
      }
    }

    const filterList = selectList.value.filter(
      (item) => !props.useScript.some((ele) => ele.id == item.submit_id)
    );

    emit("selectScript", JSON.parse(JSON.stringify(filterList)));
    message.success("导入成功!");
    drawerControl.close();
  }
};

// 保存某个脚本
const saveItem = async (ele) => {
  if (ele.edit) {
    Object.assign(find, JSON.parse(JSON.stringify(CloneOldData.value)));
    find.edit = false;
    CloneOldData.value = new Object();
  }
  // ele.loading = true;
  chooseTextArticle.value = [
    {
      title: ele.title,
      content: ele.content,
      sub_title: "",
    },
  ];

  BatchCollectRef.value.showModal();

  // const params = {
  //   title: ele.title,
  //   content: ele.content,
  //   id: ele?.submit_id || 0,
  // };
  // try {
  //   const res = await request.put(
  //     "/work_ai",
  //     "/user/shotstack/scripttext/save",
  //     params
  //   );
  //   if (res?.code && res.code != 1000) throw new Error(res.msg || "保存失败");
  //   console.log(res, "结果");
  //   ele.submit_id = res.result?.id;
  //   message.success("保存成功");
  // } catch (error) {
  //   message.warning(error.message);
  // } finally {
  //   ele.loading = false;
  // }
};

// 判断脚本是否被使用, 以及能否使用
const checkValidate = (ele) => {
  const find = props.useScript.find((item) => item.id == ele.submit_id);
  // 回显, 禁用的勾选项
  const filterSelect = selectList.value.filter((item) =>
    props.useScript.some((ele) => ele.id == item.submit_id)
  );

  // 还可以选择多少
  //  + filterSelect.length
  const selectNum = 5 - (props.scriptArrLength - filterSelect.length);

  console.log(selectNum, "还能选几个-----------------");

  if (!!find && find.content == ele.content && ele.checked) {
    ele.disabled = true;
    ele.show = false;
    ele.msg = "此脚本已勾选，不可重复勾选";
  } else if (selectList.value.length >= selectNum) {
    if (ele.checked) {
      ele.disabled = false;
      ele.show = true;
      ele.msg = "";
    } else {
      ele.disabled = true;
      ele.msg =
        "当前脚本选择已达到上限5条，请先删除已有脚本内容，才可以继续选择";
      ele.show = false;
    }
  } else {
    ele.show = true;
    ele.msg = "";
    ele.disabled = false;
  }
};

// 清空勾选项
const resetSelectData = () => {
  state.scriptList.forEach((ele) => {
    ele.checked = false;
  });
};

// 回显勾选的逻辑
const resetChecked = () => {
  state.scriptList.forEach((ele) => {
    const find = props.useScript.find((i) => i.id == ele?.submit_id);
    if (find) {
      ele.checked = true;
    } else {
      ele.checked = false;
    }
  });
};

// 获取文案风格数据
const getTextStyleList = async () => {
  const res = await request.get("/work_ai", "/user/shotstack/ai/scriptType");
  console.log(res, "文案风格数据");
  state.options = res.result;
};

// 关键词导入
const importKeyWordsHandle = (type) => {
  openType.value = type;
  importKeyWords.value.showModal();
};

const openType = ref("");
// 素材库文案导入
const openMaterial = (type) => {
  openType.value = type;
  state.materiallibraryShow = true;
};

// 文字素材选择回调
const closeChooseMaterial = (data) => {
  if (data && data.material_content !== "") {
    formState[openType.value] = data.material_content;
    nextTick(() => {
      formRef.value.validateFields(openType.value);
    });
  }
  state.materiallibraryShow = false;
};

// 关键词导入回调
const importKeyWordsSuccess = (text) => {
  console.log(text, "选择的关键词");
  if (text && text !== "") {
    formState[openType.value] = text;
    nextTick(() => {
      formRef.value.validateFields(openType.value);
    });
  }
};

// 获取语言选择列表
const getLanguagesList = async () => {
  const res = await request.get("/work_ai", "/user/shotstack/ai/languages");
  console.log(res, "文案语言");
  state.languagesList = res.result;
  // word_limit_50_75
  const find = state.languagesList.find((ele) => ele.label == "中文");
  formState.language = !!find ? find.value : res.result[0].value;
};

// 开关控制
const drawerControl = {
  open: () => {
    getIndustry();
    getTextStyleList();
    getLimit_typeList();
    getLanguagesList()
    // 回显勾选项
    resetChecked();
    state.visible = true;
  },
  close: () => {
    resetSelectData();
    state.visible = false;
  },
};

defineExpose({
  drawerControl,
});
</script>

<template>
  <a-drawer v-if="state.visible" v-model:visible="state.visible" class="custom-class"
    style="color: red; min-width: 1090px; z-index: 200 !important" placement="right" :bodyStyle="{
      paddingTop: 0,
    }" :closable="false" destroyOnClose :maskClosable="false" :keyboard="true" width="1090px">
    <slot name="title">
      <div class="title_box">
        <div class="title_top">
          <h1 class="title">文案生成</h1>
          <!-- {{ state.scriptList }} -->
          <!-- {{ props.scriptArrLength + 'props.scriptArrLength' }}
                    {{ selectList.length + 'selectList.length' }} -->
          <!-- {{ showList, 'showList' }} -->
          <div class="close" @click="drawerControl.close">
            <CloseOutlined />
          </div>
        </div>
      </div>
    </slot>

    <div class="content">
      <div class="content_left">
        <div class="content_left_box">
          <div class="script_title_box">
            <div class="script_title_item" :class="{
                scriptActive: i.id === formState.industry,
              }" v-for="(i, index) in state.industryList" @click="changeActive(i.id)" :key="i.id">
              {{ i.name }}
            </div>
          </div>

          <!-- 动态表单项 -->
          <div class="dynamic_form">
            <a-form :model="formState" name="basic" ref="formRef" :labelWrap="false" layout="vertical"
              autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed">

              <a-form-item class="form_item" v-for="i in dynamic_form" :label="i.label" :name="i.label"
                :rules="[{ required: i.required, message: `请填写${i.label}` }]">
                <template v-if="i.formtype == 'input'">
                  <a-input v-model:value="formState[i.label]" allowClear showCount :maxlength="i.max_length"
                    :placeholder="i.placeholder || ''" class="input">
                    <template #prefix>
                      <div class="btn_box" v-if="false">
                        <a-button class="btn" v-show="i.use_ai_keyword == 1" type="link" size="small"
                          @click.stop="importKeyWordsHandle(i.label)">
                          关键词导入
                        </a-button>
                        <!-- <a-button
                          class="btn"
                          style=""
                          type="link"
                          size="small"
                          @click.stop="openMaterial(i.label)"
                        >
                          文案导入
                        </a-button> -->
                      </div>
                    </template>
                  </a-input>
                </template>

                <template v-else-if="i.formtype == 'textarea'">
                  <a-textarea :autosize="{ minRows: 4, maxRows: 6 }" v-model:value="formState[i.label]" allowClear
                    showCount :maxlength="i.max_length" :placeholder="i.placeholder || ''" class="input">
                  </a-textarea>
                </template>
                <div class="btn_box">
                  <a-button class="btn" style="padding: 0 !important; font-size: 12px" v-show="i.use_ai_keyword == 1"
                    type="link" size="small" @click.stop="importKeyWordsHandle(i.label)">
                    关键词导入
                  </a-button>
                  <!-- <a-button
                    class="btn"
                    style="padding: 0 !important; font-size: 12px"
                    type="link"
                    size="small"
                    @click.stop="openMaterial(i.label)"
                  >
                    文案导入
                  </a-button> -->
                </div>
              </a-form-item>

              <!-- 文案语言 -->
              <a-form-item label="语言" name="language" >
                <a-select v-model:value="formState.language" style="width: 100%"
                :options="state.languagesList"></a-select>
              </a-form-item>

              <!-- 文案风格  -->
              <a-form-item label="文案风格" name="script_type" :rules="[{ required: true, message: '请选择文案风格' }]">
                <a-cascader style="width: 100%" expand-trigger="hover" :fieldNames="{
                    label: 'name',
                    value: 'type',
                    children: 'list',
                  }" v-model:value="formState.script_type" :options="state.options" placeholder="请选择文案风格" />
              </a-form-item>

                <!-- 生成字数 -->
              <a-form-item style="width: 100%" label="文案字数" name="limit_type">
                <a-select v-model:value="formState.limit_type" :size="size" style="width: 100%"
                  :options="state.limit_typeList"></a-select>
              </a-form-item>

            </a-form>
          </div>
        </div>

        <div class="left_bottom_controls">
          <template v-if="state.scriptList.length">
            <a-popconfirm ok-text="确认" cancel-text="取消" @confirm="submit('creat')">
              <template #title>
                <div style="width: 288px">
                  <span style="color: #232425; font-weight: 700; font-size: 15px">是否重新生成</span>
                  <p style="color: #64666b; margin: 0; margin-top: 5px">
                    点击确认后将清空右侧信息，确定重新生成吗？
                  </p>
                </div>
              </template>

              <a-button type="primary" :loading="state.creatLoading">
                <SendOutlined />
                立即生成
              </a-button>
            </a-popconfirm>
          </template>
          <template v-else>
            <a-button type="primary" @click="submit('creat')" :loading="state.creatLoading">
              <SendOutlined />
              立即生成
            </a-button>
          </template>

          <a-button type="link" @click="clearForm">
            <DeleteOutlined />
            清空输入项
          </a-button>
        </div>
      </div>

      <div class="content_right">
        <div class="right_title">
          <h3 class="title_text">为你生成</h3>
          <div class="title_desc">
            <a-tooltip placement="top">
              <template #title>
                <span>内容为AI生成，仅供参考，您对该内容的使用应严格遵循国家相关法律法规的规定</span>
              </template>
              <ExclamationCircleOutlined />
            </a-tooltip>
            <span class="desc_text">
              内容为AI生成，仅供参考，您对该内容的使用应严格遵循国家相关法律法规的规定
            </span>
          </div>
        </div>

        <div class="right_content_box">
          <!-- state.creatLoading -->
          <a-spin v-if="state.creatLoading" class="spin" :spinning="true" tip="正在为您生成数据，请稍后" />

          <template v-else-if="!state.scriptList.length">
            <!-- <a-empty class="isEmpty" /> -->
            <div class="not_content">
              <!-- <img class="isEmpty" src="../../../imgs/artificial-intelligence-92.webp" alt=""> -->
              <!-- <img class="isEmpty" src="../../../imgs/zanwujiaoben.png" alt=""> -->
              <a-empty :image="simpleImage" />
              <span class="not_content_desc_one">您暂时还没生成文案哦！</span>
              <span class="not_content_desc_two">{{ error_msg
                ? error_msg
                : "输入相关设置项，可以帮您输出脚本，快来使用吧！" }}</span>
            </div>
          </template>

          <template v-else>
            <div class="script_item_box">
              <div class="script_item" v-for="(ele, index) in showList" :key="index">
                <h4 class="script_item_title">
                  NO.{{ index + 1 }}
                  &nbsp;&nbsp;
                  {{ ele.title }}
                </h4>
                <!-- <div class="title_tags">
                                        <span v-for="item in ele.tags" :key="item.id" class="title_tags_item">{{ item.name
                                            }}</span>
                                    </div> -->
                <div class="script_content">
                  <div class="script_content_top">
                    <!-- 编辑状态 -->
                    <a-textarea class="show_content" v-if="ele.edit" v-model:value="ele.content" placeholder="请输入脚本内容"
                      :autosize="{ minRows: 2, maxRows: 10 }" :maxlength="1000" />
                    <p class="hide_content" v-else>
                      {{ ele.content }}
                    </p>

                    <!-- 文字数量 -->
                    <span class="dec_text_num">{{ ele.content.length }}/1000</span>
                  </div>

                  <!-- 编辑按钮 -->
                  <div class="script_content_bottom">
                    <template v-if="!ele.edit">
                      <div class="controls_left">
                        <a-button :loading="ele.loading" @click="saveItem(ele)" type="link" size="small">
                          <SaveOutlined />
                          保存至文案库
                        </a-button>
                        <a-button type="link" size="small" @click="editScript(ele)">
                          <EditOutlined />
                          编辑
                        </a-button>
                      </div>
                      <!-- 选择脚本 -->

                      <template v-if="ele.show">
                        <div class="controls_right">
                          <a-checkbox v-model:checked="ele.checked" :disabled="ele.disabled">
                            <span @click.stop="() => {}">选择脚本</span>
                          </a-checkbox>
                        </div>
                      </template>
                      <template v-else>
                        <a-tooltip placement="topLeft">
                          <template #title>
                            <span>{{ ele.msg }}</span>
                          </template>
                          <a-checkbox v-model:checked="ele.checked" :disabled="ele.disabled">
                            <span @click.stop="() => {}">选择脚本</span>
                          </a-checkbox>
                        </a-tooltip>
                      </template>
                    </template>
                    <template v-else>
                      <div class="controls_left">
                        <a-button type="primary" size="small" style="margin-right: 10px"
                          :disabled="!ele.content || ele.content.trim() == ''" @click="saveScript(ele)">
                          保存
                        </a-button>
                        <a-button size="small" @click="cancelEdit(ele)">
                          取消
                        </a-button>
                      </div>
                    </template>
                  </div>
                </div>
              </div>
            </div>
          </template>

          <!-- 生成更多 -->
          <!-- v-if="state.scriptList.length" -->
          <div class="creat_more" v-if="state.scriptList.length">
            <span class="des_more">当前脚本不满意？可以继续生成更多脚本</span>
            <a-button class="btn" @click="creatMore" type="link">继续生成
              <RedoOutlined />
            </a-button>
          </div>
        </div>
      </div>
    </div>

    <template #footer>
      <div style="display: flex; justify-content: flex-end">
        <a-button style="margin-right: 15px" @click="drawerControl.close">取消</a-button>
        <a-button type="primary" :disabled="submitDisabled" @click="submitConfirm"
          :loading="state.submitLoading">确定</a-button>
      </div>
    </template>
  </a-drawer>

  <ChooseMaterial :isClip="true" material_type="text" :multiple="true" :visible="state.materiallibraryShow"
    @close="closeChooseMaterial" />

  <!-- 关键词导入 -->
  <ImportKeyWords ref="importKeyWords" @success="importKeyWordsSuccess" />

  <BatchCollect ref="BatchCollectRef" :articles="chooseTextArticle"></BatchCollect>


  <!-- 充值弹窗 -->
  <vipModal ref="vipModalRef" :visible="vipVisible" @close="vipVisible = false"></vipModal>

</template>

<style lang="less" scoped>
@gao: calc(100% - 64px);
@bdc: #d6d6d6;

:deep(.ss-drawer-wrapper-body) {
  background-color: #f2f5fd !important;
}

.title_box {
  width: 100%;
  padding-bottom: 10px;
  padding-top: 24px;
  position: sticky;
  top: 0;
  background-color: #fff;
  z-index: 999;

  &::after {
    content: "";
    height: 1px;
    width: calc(100% + 48px);
    background-color: #e8e8e8;
    position: absolute;
    bottom: 0;
    left: -24px;
  }

  .title_top {
    display: flex;
    justify-content: space-between;
    color: #0c0d0e;

    // margin-bottom: 10px;
    h1 {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 4px;
    }

    .close {
      cursor: pointer;
      text-align: center;
      line-height: 29px;
      padding: 0 6px;

      &:hover {
        background-color: #f3f3f4;
      }
    }
  }

  .title_bottom {
    .btn_prev {
      border-radius: 5px;
      padding: 0 16px;
      font-size: 12px;
      height: 28px;
    }
  }
}

.content {
  color: #000000;
  display: flex;
  gap: 30px;
  width: 100%;
  height: @gao;

  .content_left {
    flex: 1;
    padding-top: 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .content_left_box {
      height: calc(100% - 50px);
      padding-right: 5px;
      overflow-y: auto;
      overflow-x: hidden;

      &::-webkit-scrollbar {
        width: 8px;
        /* 滚动条的宽度 */
        height: 10px;
        display: none;
      }

      &::-webkit-scrollbar-thumb {
        background: #888;
        /* 滑块的背景颜色 */
        border-radius: 10px;
        /* 滑块的圆角 */
      }

      // 脚本标题容器
      .script_title_box {
        display: flex;
        border-radius: 5px 5px 0 0;
        background-color: #f4f4f5;
        overflow: hidden;
        padding: 2px;
        padding-bottom: 0;
        margin-bottom: 20px;

        .script_title_item {
          cursor: pointer;
          width: 85px;
          line-height: 35px;
          text-align: center;
          border-right: 1px solid rgb(230, 230, 230);

          &:nth-last-child(1) {
            border-right: none;
          }

          &.scriptActive {
            color: var(--ss-primary-color);
            background: #fff;
            border: 1px solid rgb(230, 230, 230);
            border-bottom: none;
            border-left: none;
          }
        }
      }

      // 动态表单项
      .dynamic_form {
        display: flex;
        flex-direction: column;
        // grid-template-columns: 1fr 1fr;
        // gap: 0px 20px;

        // input 文案导入布局
        .input {
          padding-right: 0;
          position: relative;

          :deep(.ss-input-prefix) {
            opacity: 0;
            transition: all 0.3s;
            // border-left: 1px solid #ccc;
            position: absolute;
            right: -15px;
            top: -23px;

            span {
              font-size: 12px;
            }

            .btn_box {
              display: flex;
              align-items: center;
              gap: 8px;
              padding-right: 10px;

              .btn {
                padding: 0;
              }
            }
          }

          &:hover {
            :deep(.ss-input-prefix) {
              opacity: 1;
            }
          }
        }

        // textarea 文案导入布局
        .form_item {
          position: relative;

          .btn_box {
            position: absolute;
            top: -30px;
            right: 0;
            display: flex;
            align-items: center;
            gap: 3px;
            opacity: 0;
            transition: all 0.3s;

            .btn {
              padding: 3px;
            }
          }

          &:hover {
            .btn_box {
              opacity: 1;
            }
          }
        }
      }
    }

    // 底部固定的按钮组
    .left_bottom_controls {
      padding-top: 10px;
      display: flex;
      gap: 10px;
    }
  }

  .content_right {
    flex: 1;
    padding-top: 20px;
    position: relative;

    &::before {
      content: "";
      background-color: #d6d6d6;
      width: 1px;
      height: 100%;
      position: absolute;
      left: -15.5px;
      top: 15px;
    }

    .right_title {
      display: flex;
      position: sticky;
      left: 0;
      top: 0;
      margin-bottom: 25px;

      .title_text {
        font-weight: 600;
        text-wrap: nowrap;
        margin: 0;
        font-size: 15px;
      }

      .title_desc {
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 0 10px;
        flex: 1;

        .desc_text {
          padding-top: 1px;
          font-size: 12px;
          color: #888;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          width: auto;
        }
      }
    }

    .right_content_box {
      height: @gao;
      display: flex;
      flex-direction: column;

      .creat_more {
        font-size: 12px;

        .des_more {
          color: #323335;
        }

        .btn {
          font-size: 12px;
        }
      }

      .spin {
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 15px;
      }

      .not_content {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10px;

        .isEmpty {
          width: 80%;
          object-fit: contain;
        }

        .not_content_desc_one {
          font-weight: 600;
        }

        .not_content_desc_two {
          color: #888;
        }
      }

      .script_item_box {
        flex: 1;
        overflow-y: auto;
        padding-top: 22px;

        &::-webkit-scrollbar {
          display: none;
        }

        .script_item {
          padding: 15px;
          border: 1px solid @bdc;
          border-radius: 7px;
          position: relative;
          margin-bottom: 40px;

          // 每一项的标题
          .script_item_title {
            margin: 0;
            position: absolute;
            font-weight: 600;
            top: -25px;
            font-size: 14px;
            left: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            width: auto;
          }

          // 脚本的内容
          .script_content {
            .script_content_top {
              display: flex;
              flex-direction: column;

              .hide_content {
                margin: 0;
                font-size: 13px;
                color: #323335;
              }

              .dec_text_num {
                display: inline-block;
                font-size: 13px;
                color: #888;
                margin-left: auto;
              }

              .show_content {
                &::-webkit-scrollbar {
                  width: 8px;
                  /* 滚动条的宽度 */
                  height: 10px;
                }

                &::-webkit-scrollbar-thumb {
                  background: #888;
                  /* 滑块的背景颜色 */
                  border-radius: 10px;
                  /* 滑块的圆角 */
                }
              }
            }

            .script_content_bottom {
              padding-top: 10px;
              display: flex;
              justify-content: space-between;
              border-top: 1px solid #e4e4e4;

              .controls_left {
              }
            }
          }

          .title_tags {
            margin-bottom: 10px;
            display: flex;
            flex-wrap: wrap;
            gap: 5px 20px;

            .title_tags_item {
              position: relative;
              display: inline-block;
              padding: 2px 6px;
              line-height: 16px;
              font-size: 12px;
              background-color: #e5f5ff;
              color: rgb(42, 85, 229);

              &::after {
                content: "+";
                position: absolute;
                right: -10px;
                top: 15%;
                transform: translate(50%);
              }

              &:nth-last-child(1) {
                &::after {
                  content: "";
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
